// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_layout.less";

.@{prefix}-time-picker {
  width: @time-picker-width-common;
  background: @time-picker-background-color-common;
  display: inline-block;
  position: relative;
  font-size: @time-picker-font-size;
  color: @time-picker-input-text-color;

  &.@{prefix}-is-disabled {
    cursor: not-allowed;
  }

  & > *:focus,
  & > *:active {
    outline: 0;
  }

  &__group {
    position: relative;

    &.@{prefix}-is-focused {
      .@{prefix}-input__inner {
        border-color: @time-picker-input-color-focused;
      }

      .@{prefix}-input__suffix:not(.@{prefix}-input__clear) {
        .@{prefix}-icon {
          color: @time-picker-input-color-focused;
        }
      }
    }

    &.active {
      border: @time-picker-input-border-active;
      box-shadow: @time-picker-input-shadow-active;

      & + .@{prefix}-time-picker__icon-wrap > .@{prefix}-time-picker__icon-clear {
        display: block;
      }
    }

    &-text {
      color: @time-picker-input-text-color;
    }

    input {
      cursor: pointer;
    }
  }

  &__input {
    position: absolute;
    top: 0;
    height: 100%;
    padding: @time-picker-input-padding;
    z-index: 1;
    border-radius: @border-radius;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    font-size: @time-picker-font-size;
    .flex-center;

    &:hover {
      border-color: @time-picker-input-border-color-hover;
    }

    &-placeholder {
      margin-left: @time-picker-input-placeholder-margin-left;
      color: @time-picker-panel-input-placeholder-color;
    }

    &-item {
      height: 22px;

      &-disabled {
        color: @time-picker-input-color-disabled;
      }

      &-input {
        margin: @time-picker-input-item-input-margin;
        color: inherit;
        background: none;
        cursor: pointer;
        height: inherit;
        outline: none;
        width: @time-picker-input-item-input-width;
        text-align: center;
        border-radius: @time-picker-input-item-input-radius;
        border: 0;
        line-height: 22px;

        &-meridiem {
          width: @time-picker-input-item-input-meridiem-width;
        }

        &:focus {
          border-color: @bg-color-page;
          background-color: @bg-color-container-hover;
        }
      }
    }
  }

  &__input-disabled {
    border: @time-picker-input-border-disabled;
    background-color: @bg-color-container-hover;

    &-placeholder {
      color: @text-color-disabled;
    }

    &-item {
      &-input {
        pointer-events: none;
      }
    }
  }
}

.@{prefix}-time-picker__panel-container {
  margin: @time-picker-panel-container-margin;
  padding: 0;
}

.@{prefix}-time-picker__panel {
  width: @time-picker-width-common;
  background: @time-picker-background-color-common;
  border-radius: @border-radius;
  display: inline-block;
  position: relative;
  font-size: @time-picker-font-size;

  &-body {
    width: 100%;
    height: @time-picker-panel-body-height;
    position: relative;
    user-select: none;
    margin: @time-picker-panel-body-margin;

    &-active-mask {
      position: absolute;
      top: 50%;
      height: @time-picker-panel-item-height;
      width: 100%;
      display: flex;

      > div {
        flex: 1;
        transform: translateY(
          -((@time-picker-panel-item-height + @time-picker-panel-item-margin) /2)
        );
        height: @time-picker-panel-item-height;
        background-color: @time-picker-panel-item-background-color-current;
        margin: @time-picker-panel-item-margin;
        border-radius: @time-picker-panel-item-border-radius;
      }
    }
    .flex-center;

    &-scroll {
      flex: 1;
      height: 100%;
      overflow-y: scroll;
      text-align: center;
      position: relative;
      .list-style-none();

      &::-webkit-scrollbar {
        width: 0; // 不展示滚动
      }

      &::after,
      &::before {
        display: block;
        height: 50%;
        content: "";
      }

      &:last-child {
        border-right: 0;
      }

      &-item {
        height: @time-picker-panel-item-height;
        font-size: @time-picker-font-size;
        line-height: @time-picker-panel-item-height;
        color: @time-picker-panel-item-color;
        margin: @time-picker-panel-item-margin;
        border-radius: @time-picker-panel-item-border-radius;
        text-align: center;
        cursor: pointer;

        &:not(&.@{prefix}-is-current):hover {
          background-color: @time-picker-panel-item-background-color-hover;
        }

        &:not(&.@{prefix}-is-current):active {
          background-color: @time-picker-panel-item-background-color-active;
        }

        &.@{prefix}-is-disabled {
          color: @text-color-disabled;
          cursor: not-allowed;
        }

        &.@{prefix}-is-hidden {
          display: none;
          cursor: not-allowed;
        }

        &.@{prefix}-is-current {
          color: @time-picker-panel-item-color-current;
        }
      }
    }
  }
}

// TODO: 结构比较复杂且不清晰 有时间优化DOM结构
.@{prefix}-time-picker__panel-section {
  width: @time-picker-panel-section-width;
  background-color: @time-picker-background-color-common;

  &-body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: @time-picker-panel-body-padding;

    > *:nth-child(2) {
      margin-left: @time-picker-panel-section-second-body-margin-left;
    }
  }

  &-footer {
    width: 100%;
    height: @time-picker-panel-footer-height;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse; // 确定按钮一定有 此刻按钮不一定有
    align-items: center;
    background-color: @time-picker-background-color-common;
    position: relative;
    border-top: 1px solid @border-level-1-color;
    padding: @time-picker-panel-footer-padding;
  }
}
